<!--{eval $_TPL['titles'] = array('设置头像');}-->
<!--{template header_tpl}-->
<link href="<!--{eval echo base_url();}-->resources/css/jquery.Jcrop.css" rel="stylesheet" type="text/css" media="all"/>
<script src="<!--{eval echo base_url();}-->resources/js/jquery.Jcrop.min.js" type="text/javascript"></script>
<div class="grid_24 main_box">
	<h1>添加或更改你的大头像</h1>
		<div class="grid_15 headbox">
			<div class="grid_6">
				<img src="{$user[avatar]}" id="myavatar" style="max-width:180px;max-height:180px;" />
			</div>
			<div class="grid_6">
					<form action="{SITEURL}setting/avatar" method="post" accept-charset="utf-8" enctype="multipart/form-data">
						<div>从电脑中选择你喜欢的照片:</div><br>
					    <span class="pl">你可以上传JPG、JPEG、GIF、PNG或BMP文件。</span><br>
					    <input name="avatar" style="width:300px" type="file" id="avatar" onChange="showAvatar(this);"><br><br>
						<input type="hidden" name="formhash" value="<!--{eval echo formhash();}-->" />
						<p><input type="submit" value="上传照片" name="uploadavatar"><span>(图片大小为1M以下)</span></p>
					    <div>这是你在Tdaye上的头像图标</div><br>
					    <div>随意拖拽或缩放大图中的虚线方格，预览的小图即为保存后的头像图标。</div>
				
						<div style="width:50px;height:50px;overflow:hidden;">
							<img src="{$user[avatar_small]}" id="preview"/>
						</div>
					</form>
			</div>
			<div class="grid_15">
				<form action="{SITEURL}setting/avatar" method="post" accept-charset="utf-8">
					<input id="resize" value="" type="hidden" name ="resize">
					<input type="hidden" name="formhash" value="<!--{eval echo formhash();}-->" />
					<input id="choose_submit" type="submit" value="保存头像设置" name="choose_submit">
				</form>
			</div>
		</div>

		<div class="grid_7 omega sidebar">
			<div class="itembox">
				<h3>提示</h3>
				<p>给你自己扮酷!</p>
				<p>上传你喜欢的照片，随意拖拽或调整大图中的虚线方格，预览的小图（50x50像素）即为保存后的头像图标。</p>

				<p>建议上传近距离的照片（比如大头照、特写），这样经过编辑后的头像会很清楚。</p>

				<p>保存成功后如果图标不更新，你可以用浏览器多刷新几次。</p>
				<p><a href="{SITEURL}setting/index">&gt;返回个人设置</a></p>
			</div>
		</div>
</div>
<script type="text/javascript">

  jQuery(function($){

    // Create variables (in this scope) to hold the API and image size
    var jcrop_api, boundx, boundy;
    $('#myavatar').Jcrop({
		bgFade: true,
		bgOpacity: .3,
		setSelect: [ 50, 0 , 180, 180],
		maxSize:[ 180, 180],
		minSize:[ 50, 50],
		// onChange: updatePreview,
		onSelect: updatePreview,
		aspectRatio: 1
    },function(){
      // Use the API to get the real image size
      var bounds = this.getBounds();
      boundx = bounds[0];
      boundy = bounds[1];
      // Store the API in the jcrop_api variable
      jcrop_api = this;
    });

    function updatePreview(c)
    {
      if (parseInt(c.w) > 0){
        var rx = 50 / c.w;
        var ry = 50 / c.h;
		$('#preview').attr('src', $('#myavatar').attr('src'));
        $('#preview').css({
          width: Math.round(rx * boundx) + 'px',
          height: Math.round(ry * boundy) + 'px',
          marginLeft: '-' + Math.round(rx * c.x) + 'px',
          marginTop: '-' + Math.round(ry * c.y) + 'px'
        });
		$('#resize').val(c.x+'_'+c.y+'_'+c.w+'_'+c.h);
      }
    };

  });

</script>

<!--{template footer_tpl}-->